<template>
  <div>
    <el-form
      ref="searchForm"
      :inline="true"
      :model="search"
      style="margin-top: 20px"
    >
      <el-form-item prop="name">
        <el-input
          v-model="search.name"
          placeholder="根据姓名查询"
          style="width: 200px"
        ></el-input>
      </el-form-item>
      <el-form-item prop="direction">
        <el-select
          v-model="search.direction"
          placeholder="根据学习方向查询"
          style="width: 150px"
        >
          <el-option
            v-for="option in directionOptions"
            :key="option.type"
            :label="option.name"
            :value="option.type"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="class">
        <el-select
          v-model="search.class"
          placeholder="根据班级查询"
          style="width: 150px"
        >
          <el-option
            v-for="option in classOptions"
            :key="option._id"
            :label="option.classname"
            :value="option.classname"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="teacher">
        <el-input
          v-model="search.teacher"
          placeholder="根据教师查询"
          style="width: 200px"
        ></el-input>
      </el-form-item>

      <el-form-item prop="manager">
        <el-input
          v-model="search.manager"
          placeholder="根据学管查询"
          style="width: 200px"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button icon="el-icon-search" type="primary" @click="searchData"
          >查询</el-button
        >
        <el-button icon="el-icon-thumb" type="primary" @click="handleAdd"
          >添加</el-button
        >
        <el-button type="danger" round @click="resetForm('searchForm')"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-table :data="students" style="width: 100%" border>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="姓名" class="aaa">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="性别">
              <span>{{ props.row.gender | dataFilter(genderOptions) }}</span>
            </el-form-item>
            <el-form-item label="学校">
              <span>{{ props.row.school }}</span>
            </el-form-item>
            <el-form-item label="专业">
              <span>{{ props.row.major }}</span>
            </el-form-item>
            <el-form-item label="年级">
              <span>{{ props.row.grade | dataFilter(gradeOptions) }}</span>
            </el-form-item>
            <el-form-item label="学历">
              <span>{{
                props.row.education | dataFilter(educationOptions)
              }}</span>
              <!-- | dataFilter(educationOptions) -->
            </el-form-item>
            <el-form-item label="学习方向">
              <span>{{
                props.row.direction | dataFilter(directionOptions)
              }}</span>
              <!-- | dataFilter(directionOptions) -->
            </el-form-item>
            <el-form-item label="身份号码">
              <span>{{ props.row.id_number }}</span>
            </el-form-item>
            <el-form-item label="电话号码">
              <span>{{ props.row.phone }}</span>
            </el-form-item>
            <el-form-item label="家长名">
              <span>{{ props.row.parent }}</span>
            </el-form-item>
            <el-form-item label="家长联系电话">
              <span>{{ props.row.parent_phone }}</span>
            </el-form-item>
            <el-form-item label="家庭住址">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="QQ号码">
              <span>{{ props.row.qq }}</span>
            </el-form-item>
            <el-form-item label="所在班级">
              <span>{{
                props.row.class 
              }}</span>
              <!-- | teacherOrManagerFilter(classOptions) -->
            </el-form-item>
            <el-form-item label="入学时间">
              <span>{{ props.row.addmission_date }}</span>
            </el-form-item>
            <el-form-item label="教师">
              <span>{{
                props.row.teacher_id | teacherOrManagerFilter(teacherOPtions)
              }}</span>
            </el-form-item>
            <el-form-item label="学管">
              <span>{{
                props.row.manager_id | teacherOrManagerFilter(managerOptions)
              }}</span>
            </el-form-item>
            <el-form-item label="照片数组">
              <!-- <span>{{ props.row.pictures }}</span> -->
              <el-image
                v-for="(item, index) in props.row.pictures"
                :key="index"
                style="
                  width: 200px;
                  height: 200px;
                  margin-right: 10px;
                  padding: 5px;
                  border: 1px solid #ccc;
                "
                :src="baseUrl + '/upload/' + item"
                :preview-src-list="setSrcList(props.row.pictures)"
              >
              </el-image>
            </el-form-item>
            <el-form-item label="备注信息">
              <span v-html="props.row.note"></span>
              <!-- {{ props.row.note }} -->
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="序号" type="index" width="60"> </el-table-column>
      <el-table-column label="学员姓名" prop="name" width="100">
      </el-table-column>
      <el-table-column label="性别" prop="gender" width="60">
        <template slot-scope="scope">
          <span>{{ scope.row.gender | dataFilter(genderOptions) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="学习方向" prop="direction" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.direction | dataFilter(directionOptions) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="联系电话" prop="phone" width="150">
      </el-table-column>
      <el-table-column label="所在班级" prop="class" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.class}}</span>
          <!-- | teacherOrManagerFilter(classOptions)  -->
        </template>
      </el-table-column>
      <el-table-column
        label="授课教师"
        prop="teacher_id"
        width="150"
        :formatter="formatTeacher"
      >
      </el-table-column>
      <el-table-column
        label="学管"
        prop="manager_id"
        width="150"
        :formatter="formatManager"
      >
      </el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row._id)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row._id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-sizes="[10,15,20,25]"
      :page-size.sync="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import studentApi from "@/api/student";
import schoolApi from "@/api/school";
import classApi from "@/api/class";
import userApi from "@/api/user";
import majorApi from "@/api/majors";
export default {
  data() {
    return {
      baseApi: process.env.VUE_APP_BASE_API,
      baseUrl: process.env.VUE_APP_SERVICE_URL,
      userAll: [],
      total: 0,
      totalPage: 1,
      currentPage: 1, //当前页
      pageSize: 5, //每页几条数据
      students: [],
      search: {
        name: "",
        direction: "",
        class: "",
        teacher: "",
        manager: "",
      },
      searchMap: {
        name: "",
        direction: "",
        class: "",
        teacher_id: "",
        manager_id: "",
      },
      //性别
      genderOptions: [
        { type: "0", name: "男" },
        { type: "1", name: "女" },
      ],
      //学校
      schoolOptions: [],
      majorOptions: [],
      //年级
      gradeOptions: [
        { type: "1", name: "大一" },
        { type: "2", name: "大二" },
        { type: "3", name: "大三" },
        { type: "4", name: "大四" },
        { type: "5", name: "研究生" },
      ],
      //学历
      educationOptions: [
        { type: "1", name: "专科" },
        { type: "2", name: "本科" },
        { type: "3", name: "硕士" },
        { type: "4", name: "社会" },
      ],
      directionOptions: [
        { type: "1", name: "web前端" },
        { type: "2", name: "Java" },
        { type: "3", name: "UI/UE" },
        { type: "4", name: "C/C++" },
      ],
      classOptions: [],
      teacherOPtions: [],
      managerOptions: [],
    };
  },
  filters: {
    dataFilter(type, dataOPtions) {
      const obj = dataOPtions.find((obj) => obj.type == type);
      return obj ? obj.name : null;
    },
    teacherOrManagerFilter(_id, options) {
      const obj = options.find((obj) => obj._id == _id);
      return obj ? obj.name : null;
    },
  },
  components: {},
  mounted() {
    this.fetStudentList();
    this.getUserList();
    this.getclassList();
    this.getMajorList();
    this.getSchoolList();
  },
  methods: {
    handleDelete(_id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // console.log(id);
          studentApi.deleteByid(_id).then((response) => {
            const res = response.data;
            if (res.status == 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.totalPage = (this.total - 1) / this.pageSize;
              if (this.currentPage > Math.ceil(this.totalPage)) {
                this.currentPage = Math.ceil(this.totalPage);
              }
              this.fetStudentList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    handleEdit(_id) {
      this.$router.push(`/student/update/${_id}`);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.searchMap.direction =  "";
      this.searchMap.name =  "";
      this.searchMap.class =  "";
      this.fetStudentList();
    },
    handleAdd() {
      this.$router.push(`/student/update/-1`);
    },
    searchData() {
      /* 项目中遇到的问题
        if (resTeacher._id) {
        this.searchMap.teacher_id = resTeacher._id;
      } else if (this.search.teacher) {
        this.searchMap.teacher_id = "-1";
      } else {
        this.searchMap.teacher_id = "";
      }

      if (resManger._id) {
        this.searchMap.manager_id = resManger._id;
      } else if (this.search.manager) {
        this.searchMap.manager_id = "-1";
      } else {
        this.searchMap.manager_id = "";
      }
      如果这段代码不写
      */
      this.currentPage = 1;
      const resTeacher =
        this.userAll.find((item) => item.name === this.search.teacher) || {};
      const resManger =
        this.userAll.find((item) => item.name === this.search.manager) || {};
      if (resTeacher._id) {
        this.searchMap.teacher_id = resTeacher._id;
      } else if (this.search.teacher) {
        this.searchMap.teacher_id = "-1";
      } else {
        this.searchMap.teacher_id = "";
      }

      if (resManger._id) {
        this.searchMap.manager_id = resManger._id;
      } else if (this.search.manager) {
        this.searchMap.manager_id = "-1";
      } else {
        this.searchMap.manager_id = "";
      }

      this.searchMap.direction = this.search.direction || "";
      this.searchMap.name = this.search.name || "";
      this.searchMap.class = this.search.class || "";

      this.fetStudentList();
    },
    setSrcList(imgList) {
      console.log(imgList);
      return imgList.map((item) => this.baseUrl + "/upload/" + item);
    },
    handleSizeChange() {
      this.fetStudentList();
    },
    handleCurrentChange() {
      this.fetStudentList();
    },
    formatTeacher(row, column, cellValue, index) {
      const teacher = this.userAll.find((item) => item._id === cellValue) || {};
      return teacher.name;
    },
    formatManager(row, column, cellValue, index) {
      const manager = this.userAll.find((item) => item._id == cellValue) || {};
      return manager.name;
    },
    fetStudentList() {
      studentApi
        .getstudentList(this.currentPage, this.pageSize, this.searchMap)
        .then((response) => {
          const resp = response.data;
          if (resp.status == 0) {
            this.students = resp.data.data;
            this.total = resp.data.total;
          }
        });
    },
    //获取所有用户列表
    getUserList() {
      userApi.getUserAll().then((response) => {
        const res = response.data;
        if (res.status === 0) {
          console.log(res.data);
          this.userAll = res.data;
          this.userAll.forEach((item) => {
            if (item.role_id === "6322979ee6ce6366206d0aad") {
              this.teacherOPtions.push(item);
            } else if (item.role_id === "632297a3e6ce6366206d0ab0") {
              this.managerOptions.push(item);
            }
          });
        }
      });
    },
    //获取班级列表
    getclassList() {
      classApi.getclassAll().then((response) => {
        const res = response.data;
        if (res.status === 0) {
          this.classOptions = res.data;
          console.log(this.classOptions);
        }
      });
    },
    //获取学校列表
    getSchoolList() {
      schoolApi.getSchoolList().then((response) => {
        const res = response.data;
        if (res.status === 0) {
          this.schoolOptions = res.data;
        }
      });
    },
    //获取所有专业
    getMajorList() {
      majorApi.getmajorsList().then((response) => {
        const res = response.data;
        if (res.status == 0) {
          this.majorOptions = res.data;
        }
      });
    },
  },
};
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
  margin-left: 100px;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
</style>